<!DOCTYPE html>
<meta charset="UTF-8">
<h2>消息框弹出位置</h2>
<div style="margin: 10px 0;">
	<p>
		<a href="javascript:void(0)" data-type="button" onclick="topLeft();" data-defs="'width':150">左上</a>
		<a href="javascript:void(0)" data-type="button" onclick="topCenter()" data-defs="'width':150">中上</a>
		<a href="javascript:void(0)" data-type="button" onclick="topRight()" data-defs="'width':150">右上</a>
	</p>
	<p>
		<a href="javascript:void(0)" data-type="button" onclick="centerLeft()" data-defs="'width':150">左中</a>
		<a href="javascript:void(0)" data-type="button" onclick="center()" data-defs="'width':150">中间</a>
		<a href="javascript:void(0)" data-type="button" onclick="centerRight()" data-defs="'width':150">右中</a>
	</p>
	<p>
		<a href="javascript:void(0)" data-type="button" onclick="bottomLeft()" data-defs="'width':150">左下</a>
		<a href="javascript:void(0)" data-type="button" onclick="bottomCenter()" data-defs="'width':150">中下</a>
		<a href="javascript:void(0)" data-type="button" onclick="bottomRight()" data-defs="'width':150">右下</a>
	</p>
</div>
<script>
    function topLeft() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'show',
	        style : {
	            right : '',
	            left : 0,
	            top : document.body.scrollTop + document.documentElement.scrollTop,
	            bottom : ''
	        }
	    });
    }
    function topCenter() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'slide',
	        style : {
	            right : '',
	            top : document.body.scrollTop + document.documentElement.scrollTop,
	            bottom : ''
	        }
	    });
    }
    function topRight() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'show',
	        style : {
	            left : '',
	            right : 0,
	            top : document.body.scrollTop + document.documentElement.scrollTop,
	            bottom : ''
	        }
	    });
    }
    function centerLeft() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'fade',
	        style : {
	            left : 0,
	            right : '',
	            bottom : ''
	        }
	    });
    }
    function center() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'fade',
	        style : {
	            right : '',
	            bottom : ''
	        }
	    });
    }
    function centerRight() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'fade',
	        style : {
	            left : '',
	            right : 0,
	            bottom : ''
	        }
	    });
    }
    function bottomLeft() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'show',
	        style : {
	            left : 0,
	            right : '',
	            top : '',
	            bottom : -document.body.scrollTop - document.documentElement.scrollTop
	        }
	    });
    }
    function bottomCenter() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'slide',
	        style : {
	            right : '',
	            top : '',
	            bottom : -document.body.scrollTop - document.documentElement.scrollTop
	        }
	    });
    }
    function bottomRight() {
	    $.messager.show({
	        title : 'My Title',
	        msg : 'The message content',
	        showType : 'show'
	    });
    }
</script>
